<template>
  <contentModel v-if="modelValue" title="详情" @open="open" @close="cancel">
    <table-container
      v-model:columns="columns"
      v-model:is-fullscreen="isFullscreen"
      :loading="boxTableLoading"
      :all-columns="allColumns"
      @refresh="getBoxTableList"
    >
      <standard-table
        ref="detailTable"
        v-model:selectedKeys="detailSelectedKeys"
        :component-config="tableComponentConfig"
        :render-config="tableRenderConfig"
        :render-keys="tableRenderKeys"
        :loading="detailTableLoading"
        :data="detailTableData"
        :total="detailTableTotal"
        @init-columns-end="initColumns"
        @page-change="detailPageChange"
        @page-size-change="detailPageSizeChange"
      >
      </standard-table>
    </table-container>
  </contentModel>
</template>

<script lang="ts" setup>
  import { defineAsyncComponent, ref, toRefs } from 'vue';
  import lodash from 'lodash';
  import StandardTable from '@/common/components/standard-table/index.vue';
  import TableContainer from '@/common/components/table-container/index.vue';
  import { getScsProductReverseList } from '@/api/reverse-procurement/product-handling';
  import {
    tableRenderConfig,
    tableComponentConfig,
  } from '../module-common/table-comp/base-table-config';

  const contentModel = defineAsyncComponent(
    () => import('@/common/components/content-model/index.vue')
  );
  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false,
    },
    // eslint-disable-next-line vue/require-prop-types
    selectId: {},
  });
  const emits = defineEmits(['update:modelValue']);
  const cancel = () => {
    emits('update:modelValue', false);
  };
  // const { cancel } = useModelFun();
  const { selectId } = toRefs(props);
  const columns = ref<object[]>([]);
  const allColumns = ref<object[]>([]);
  const initColumns = (data: any[]) => {
    columns.value = lodash.cloneDeep(data);
    allColumns.value = lodash.cloneDeep(data);
  };
  const init = () => {
    if (selectId?.value) {
      // getDetailTableList();
    }
  };
  // table-list
  const detailTable = ref(null);
  // const detailRenderKeys = ['orderNo', 'mdsItemCode'];
  const detailSelectedKeys = ref([]);
  const detailTableLoading = ref(false);
  const detailTableData = ref([]);
  const detailTableTotal = ref(0);
  // 当前表格要渲染哪些值
  const tableRenderKeys = [
    'situationTracking',
    'expectedReturnTime',
    'vendorEditUserName',
    'vendorEditDate',
  ];
  // const searchHandle = (query = {}) => {
  //   getDetailTableList(query);
  // };
  // const resetHandle = () => {
  //   getDetailTableList({});
  // };
  const open = () => {
    getDetailTableList();
  };
  const detailPageChange = () => {
    getDetailTableList();
  };
  const detailPageSizeChange = () => {
    getDetailTableList();
  };
  const getDetailTableList = async () => {
    // const page = detailTable.value.getStatus();
    detailTableLoading.value = true;
    const { data } = await getScsProductReverseList(selectId?.value);
    detailTableData.value = data || [];
    detailTableTotal.value = data.length;
    detailTableLoading.value = false;
  };
  init();
</script>
